<template>
    <div class="navmenu">
        <div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="/">
                    <router-link to="/" class="elmenuitem">首页</router-link>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title" class="elmenuitem">就业中心</template>
                    <el-menu-item index="2-1">就业部简介</el-menu-item>
                    <el-menu-item index="2-2">服务流程</el-menu-item>
                </el-submenu>
                <el-menu-item index="/allposition" class="elmenuitem">
                    <router-link to="/allposition" class="elmenuitem">全部职位</router-link>
                </el-menu-item>
                <el-submenu index="4" class="elmenuitem">
                    <template slot="title">人才中心</template>
                    <el-menu-item index="4-1">人才库</el-menu-item>
                    <el-menu-item index="4-2">就业明星</el-menu-item>
                    <el-menu-item index="4-3">最新人才</el-menu-item>
                </el-submenu>
                <el-menu-item index="5">企业案例</el-menu-item>
                <el-menu-item index="6">职场指南</el-menu-item>
                <el-menu-item index="7">合作企业</el-menu-item>
                <el-menu-item index="8">高端人才</el-menu-item>
            </el-menu>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'navmenu',
        data() {
            return {
                activeIndex: '/'
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
    }
</script>
<style scoped>
    .navmenu {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>
